<template>
	<view>

		<view class="prefer-posi">

			<view class="select">
				<view class="flex-grow-one">
					<text @click="sortSelset">{{sortListSlectName}}</text>
					<image class="img" src="../../../static/coen/paixu.png" mode="widthFix"></image>
				</view>
				<view class="flex-grow-one" @click="second">
					销量高
				</view>
				<view class="flex-grow-one" @click="third">
					速度快
				</view>
				<view class="flex-grow-one" @click="fourth">
					津贴联盟
				</view>
				<view class="flex-grow-five">
					<text @click="screenSelset">筛选</text>
					<image class="img" src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序 -->
			<view class="sort" v-show="sortFlag">
				<block v-for="(item,index) in sortList" :key='index'>
					<view :class="{active:index==sortActive}" @click="sortListSlectItem(item,index)">{{item.name}}
					</view>
				</block>
			</view>

			<!-- 筛选 -->
			<view class="filterSelect" v-show="screenFlag">
				<block v-for="(item,index) in screenList" :key='index'>
					<view>
						<view class="filterTitle">
							{{item.title}}
						</view>
						<view class="filterFlex">
							<block v-for="(it,i) in item.data" :key='i'>
								<text class="choice" :class="{
									handleActives:it.flag===true
								}" @click='handleSelects(index,i,it.sign)'>
									{{it.name}}
								</text>
							</block>
						</view>
					</view>
				</block>
				<block v-for="(item,index) in personList" :key='index'>
					<view>
						<view class="filterTitle">
							{{item.title}}
						</view>
						<view class="filterFlex">
							<block v-for="(it,i) in item.data" :key='i'>
								<text class="choice" :class="{
									handleActive:it.flag===true
								}" @click='handleSelect(index,i,it.per)'>
									{{it.name}}
								</text>
							</block>
						</view>
					</view>
				</block>

				<view class="btn">

					<text @click="clearSelects">清空</text>

					<text @click="complete">完成</text>

				</view>
			</view>
			<view class="shadow" v-show="shadowFlag" @click="hiddenShadow"></view>
		</view>
		<!-- 	<view class="shadow"></view> -->


	</view>

</template>

<script>
	import {
		starting,
		multiple
	} from '../../../api/api/forshop.js'
	export default {
		data() {
			return {
				sortListSlectName: '综合排序',
				sortList: [{
						name: '综合排序',
						screen: 'id',
						nums: 1
					},
					{
						name: '起送价最低',
						screen: 'delivering',
						nums: 1
					},
					{
						name: '配送费最低',
						screen: 'physical',
						nums: 1
					},
					{
						name: '人均高到低',
						screen: 'capita',
						nums: -1
					},
					{
						name: '人均低到高',
						screen: 'capita',
						nums: 1
					}
				],
				sortFlag: false,
				shadowFlag: false,
				sortActive: '0',
				screenList: [{
					title: '商家特色(可多选)',
					data: [{
							flag: false,
							sign: 'duration',
							name: '配送最快'
						},
						{
							flag: false,
							sign: 'deliver',
							name: '0元起送'
						},
						{
							flag: false,
							sign: 'physi',
							name: '免费配送'
						},

					]
				}],
				screenFlag: false,
				personList: [{
					title: '人均价',
					data: [{
							flag: false,
							"name": "20元以下",
							"per": {
								"$lt": 20
							},
						},
						{
							flag: false,
							"name": "20-40元",
							"per": {
								"$lte": 40,
								"$gte": 20
							},
						},
						{
							flag: false,
							"name": "40元以上",
							"per": {
								"$gt": 40
							},
						},
					]
				}],
				multipleList: {}

			}
		},
		methods: {
			sortSelset() {
				this.sortFlag = true
				this.shadowFlag = true
				this.screenFlag = false
			},
			async sortListSlectItem(item, index) {
				this.sortListSlectName = item.name
				this.sortActive = index
				this.shadowFlag = false
				this.sortFlag = false
				const {
					data: res
				} = await starting({
					screen: item.screen,
					nums: item.nums
				})
				this.$store.commit('screenChange', res)

			},
			hiddenShadow() {
				this.shadowFlag = false
				this.sortFlag = false
				this.screenFlag = false
			},
			screenSelset() {
				this.screenFlag = true
				this.shadowFlag = true
				this.sortFlag = false
			},
			second() {
				this.screenFlag = false
				this.shadowFlag = false
				this.sortFlag = false
			},
			third() {
				this.screenFlag = false
				this.shadowFlag = false
				this.sortFlag = false
			},
			fourth() {
				this.screenFlag = false
				this.shadowFlag = false
				this.sortFlag = false
			},
			handleSelects(index, i, sign) {

				this.screenList[index]['data'][i].flag = !this.screenList[index]['data'][i].flag
				let flag = this.screenList[index]['data'][i].flag
				if (flag == true) {

					this.$set(this.multipleList, sign, sign)
				} else {
					this.$delete(this.multipleList, sign)
				}

			},
			handleSelect(index, i, per) {
				if (this.personList[index]['data'][i].flag == true) {
					this.personList[index]['data'][i].flag = !this.personList[index]['data'][i].flag
					this.$delete(this.multipleList, 'capita')
				} else {
					this.personList[index]['data'].forEach((item, currentIndex) => {
						if (i === currentIndex) {
							item.flag = true
							this.$set(this.multipleList, 'capita', per)
						} else {
							item.flag = false

						}
					})

				}



			},
			clearSelects() {
				this.screenList[0]['data'].forEach((item, currentIndex) => {
					item.flag = false

				})
				this.personList[0]['data'].forEach((item, currentIndex) => {
					item.flag = false

				})
			},
			async complete() {
				const {
					data: res
				} = await multiple(this.multipleList)
				this.$store.commit('screenChange', res)
				this.shadowFlag = false
				this.screenFlag = false
			}


		}
	}
</script>

<style scoped lang="scss">
	.prefer-posi {

		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;

		.select {
			padding: 0 15upx;
			display: flex;
			height: 70upx;

			align-items: center;
			font-size: 30upx;
			background: #FFFFFF;

			.flex-grow-one {
				flex-grow: 1;

			}

			.flex-grow-five {
				display: flex;
				flex-grow: 5;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.img {
			vertical-align: middle;
			width: 30upx;
			height: 30upx;

		}

		.sort {

			padding: 0 15upx;
			background: #FFFFFF;

			// background: #FFFFFF;
			view {
				font-size: 30upx;
				height: 70upx;
				line-height: 70upx;
				border-top: 1upx solid #ededed;
			}

			.active {
				color: #f89903 !important;
			}
		}

		.filterSelect {
			padding: 0 15upx;
			height: 700upx;
			overflow-y: scroll;
			// overflow: hidden;
			position: relative;
			background: #FFFFFF;

			.filterTitle {
				font-size: 30upx;
				height: 60upx;
				line-height: 60upx;
			}

			.filterFlex {
				display: flex;
				align-items: center;
				margin-bottom: 30upx;

				.choice {
					font-size: 28upx;
					background: #f8f8f8;
					height: 55upx;
					line-height: 55upx;
					color: #666666;
					width: calc(100%/3) !important;
					margin: 7.5upx;
					text-align: center;
					display: block;
					border-radius: 5upx;
				}

				.handleActives {
				background: #fef6df !important; color: #f29909 !important;
				}

				.handleActive {
					background: #fef6df !important; color: #f29909 !important;
				}
			}

			.btn {
				background: #ffffff;
				height: 80upx;
				border-top: 1upx solid #e4e4e4;
				// border-bottom: 1upx solid #e4e4e4;
				display: flex;

				position: absolute;

				left: 0;
				right: 0;
				bottom: 0;


				text {
					display: block;
					flex-grow: 1;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
				}

				text:nth-child(1) {
					border-right: 1upx solid #e4e4e4;
				}

				text:nth-child(2) {
					background: #ffd348;


				}


			}
		}

		.active {
			color: #F8F8F8 !important;
		}
	}




	.shadow {
		background: rgba(0, 0, 0, 0.5);
		// height: 1000upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
</style>
